<template>
  <div class="box app-container">
    <el-row>
      <el-col :span="24">
        <el-alert
          title="Microsoft Edge体验更佳"
          type="warning"
          show-icon
          :closable="false">
        </el-alert>
        <el-card shadow="never" :body-style="{height:'calc(100vh - 230px)'}">
          <el-col :span="12">
            <el-form :inline="true" :model="form" class="demo-form-inline" label-position="top">
              <el-form-item label="文本">
                <el-input type="textarea" v-model="form.content" :rows="14"></el-input>
              </el-form-item>
              <el-form-item label="语言">
                <el-select v-model="form.language" placeholder="语音" >
                  <el-option :label="item.name" :value="item.lang+index" v-for="(item,index) in list" :key="index"
                             @click.native="getItem(item)"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="操作">
                <el-button type="primary" @click="Submit">播 放</el-button>
                <el-button type="primary" @click="paused">停 止</el-button>
                <el-button type="primary" @click="stop">结 束</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Speech from 'speak-tts'

export default {
  name: 'index',
  data() {
    return {
      form: {
        content: '最近更新：🎉 Vue Admin Plus 累计完成6种布局、9种主题，覆盖绝大多数使用场景。\n' +
          '\t📦 update️：\n' +
          '\tvue v3.2.45；\n' +
          '\t自定义水印demo；\n' +
          '\t语音合成demo；\n' +
          '\tvscode代码智能提醒 v1.1.2；\n' +
          '\t富文本编辑器添加图片上传demo；\n' +
          '    组件按需自动导入。\n' +
          '\t开年特惠，1299版本买1得4，799版本买1得2：\n' +
          '\t点我购买',
        language: ''
      },
      lang: '',
      people:'',
      list: [],
      speech: null,
      isPaused:false
    }
  },
  created() {
    this.initSpeech()
  },
  methods: {
    getItem(item){
      this.lang = item.lang
      this.people = item.name
    },
    paused() {
      this.speech.pause()
      this.isPaused = true
    },
    stop() {
      this.speech.cancel()
    },
    initSpeech() {
      const speech = new Speech() // will throw an exception if not browser supported
      if (speech.hasBrowserSupport()) { // returns a boolean
        speech.init({
          'listeners': {
            'onvoiceschanged': (voices) => {
              voices.forEach(e => {
                let lang = e.lang
                let name = e.name
                this.list.push(
                  {
                    name: name,
                    lang: lang
                  }
                )
              })
              this.form.language = this.list[0].name
              this.lang = this.list[0].lang
              this.people = this.list[0].name
            }
          }
        })
      }
    },
    Submit() {
      if (this.isPaused){
        this.speech.resume()
        this.isPaused = false
      }else {
        this.speech = new Speech()
        if (this.speech.hasBrowserSupport()) { // returns a boolean
          this.speech.setLanguage(this.lang)
          this.speech.setVoice(this.people)
          this.speech.init({})
        }
        this.speech.speak({
          text: this.form.content,
          queue: false
        }).then(() => {
          console.log('Success !')
        }).catch(e => {
          console.error('An error occurred :', e)
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  .demo-form-inline {
    width: 270px;

    ::v-deep.el-textarea, ::v-deep.el-input {
      width: 270px;
    }

    ::v-deep.el-form-item__label {
      font-weight: 400;
    }
  }
}
</style>
